<!-- community.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>交流社区 | 分享您的观点</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#FF7D00',
            neutral: {
              100: '#F5F7FA',
              200: '#E4E7ED',
              300: '#C0C6CF',
              400: '#909399',
              500: '#606266',
              600: '#303133',
              700: '#1E1E1E',
            }
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
          boxShadow: {
            'card': '0 10px 30px -5px rgba(0, 0, 0, 0.1)',
            'input': '0 2px 5px rgba(22, 93, 255, 0.08)',
          }
        },
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .bg-gradient-primary {
        background: linear-gradient(135deg, #165DFF 0%, #0E42B3 100%);
      }
      .transition-all-300 {
        transition: all 300ms ease-in-out;
      }
      .form-input-focus {
        @apply border-primary shadow-input ring-1 ring-primary/20;
      }
      .comment-box {
        position: relative;
      }
      .comment-box:before {
        content: "";
        position: absolute;
        left: -20px;
        top: 15px;
        width: 15px;
        height: 15px;
        border-left: 1px solid #E4E7ED;
        border-bottom: 1px solid #E4E7ED;
        transform: rotate(45deg);
        background: white;
      }
    }
  </style>
</head>

<body class="font-inter bg-neutral-100 min-h-screen">
  <!-- 导航栏 -->
  <nav class="bg-white shadow-sm">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between h-16">
    <div class="flex items-center space-x-4">
              <!-- 返回首页按钮 -->
              <a href="首页.html" class="text-neutral-600 hover:text-primary">
                <i class="fa-solid fa-house"></i> 首页
              </a>
              <a href="#" class="text-xl font-bold text-primary">交流社区</a>
            </div>
        <div class="flex items-center space-x-4">
          <a href="#" class="text-neutral-600 hover:text-primary">
            <i class="fa-solid fa-bell"></i>
          </a>
          <div class="relative">
            <button id="userMenuButton" class="flex items-center space-x-2 focus:outline-none">
              <span class="text-neutral-700" id="usernameDisplay">用户</span>
              <div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center">
                <i class="fa-solid fa-user"></i>
              </div>
            </button>
            <div id="userMenu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50">
              <a href="#" class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100">个人资料</a>
              <a href="#" class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100">设置</a>
              <a href="login.html" class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100">退出登录</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>

  <!-- 主内容区 -->
  <div class="max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
    <!-- 发布新帖子 -->
    <div class="bg-white rounded-lg shadow-card p-6 mb-8">
      <h2 class="text-lg font-semibold text-neutral-700 mb-4">分享您的观点</h2>
      <form id="postForm">
        <textarea id="postContent" rows="3" class="w-full px-4 py-3 rounded-lg border border-neutral-200 focus:outline-none focus:form-input-focus transition-all-300" placeholder="写下您的想法..."></textarea>
        <div class="flex justify-between items-center mt-4">
          <div class="flex space-x-2">
            <button type="button" class="w-10 h-10 rounded-full bg-neutral-100 hover:bg-neutral-200 flex items-center justify-center transition-all-300">
              <i class="fa-solid fa-image text-neutral-600"></i>
            </button>
            <button type="button" class="w-10 h-10 rounded-full bg-neutral-100 hover:bg-neutral-200 flex items-center justify-center transition-all-300">
              <i class="fa-solid fa-link text-neutral-600"></i>
            </button>
          </div>
          <button type="submit" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-6 rounded-lg transition-all-300">
            发布
          </button>
        </div>
      </form>
    </div>

    <!-- 帖子列表 -->
    <div id="postsContainer" class="space-y-6">
      <!-- 帖子将通过JavaScript动态加载 -->
    </div>
  </div>

  <!-- 成功提示 -->
  <div id="successToast" class="fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-500 flex items-center z-50">
    <i class="fa-solid fa-check-circle mr-2"></i>
    <span id="successMessage">发布成功！</span>
  </div>

  <!-- 错误提示 -->
  <div id="errorToast" class="fixed bottom-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-500 flex items-center z-50">
    <i class="fa-solid fa-exclamation-circle mr-2"></i>
    <span id="errorMessage">发布失败，请重试</span>
  </div>

  <!-- 引入JavaScript -->
  <script src="community.js"></script>
</body>
</html>